import React, { useState } from 'react'
import { Avatar, Tag, List, Divider, Modal } from 'antd-mobile'
import { AppOutline, PayCircleOutline, InformationCircleOutline } from 'antd-mobile-icons'

export default function Profile() {
  const [aboutVisible, setAboutVisible] = useState(false)
  // mock 数据，可后续接入后端
  const user = {
    nickname: 'yuyou',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    vipExpireAt: '2025-12-03',
    isVip: true,
  }

  return (
    <div style={{ paddingBottom: 80 }}>
      {/* 头部绿色区 */}
      <div style={{
        background: '#00b578',
        paddingTop: 24,
        paddingBottom: 64,
        color: '#fff',
        textAlign: 'center',
        position: 'relative',
      }}>
        <div style={{ fontSize: 18, fontWeight: 700 }}>我的</div>
        <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
          <Avatar src={user.avatar} style={{ '--size': '72px', border: '3px solid #fff' }} />
          <div style={{ fontSize: 18, fontWeight: 600 }}>{user.nickname}</div>
          {user.isVip && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Tag color='warning' fill='solid'>VIP</Tag>
              <span style={{ opacity: 0.95 }}>到期时间：{user.vipExpireAt}</span>
            </div>
          )}
        </div>
      </div>

      {/* 列表卡片 */}
      <div style={{ padding: '0 16px' }}>
        <div style={{
          background: '#fff',
          borderRadius: 12,
          marginTop: -32,
          boxShadow: '0 6px 18px rgba(0,0,0,0.06)',
          overflow: 'hidden'
        }}>
          <List>
            <List.Item
              prefix={<AppOutline style={{ fontSize: 22, color: '#4B7BEC' }} />}
              onClick={() => { window.location.hash = '#/app/message' }}
              extra={<span style={{ color: '#c7c7c7' }}>›</span>}
            >
              我的消息
              <div style={{ color: '#999', fontSize: 12 }}>查看我发布的消息</div>
            </List.Item>
            <Divider style={{ margin: 0 }} />
            <List.Item
              prefix={<PayCircleOutline style={{ fontSize: 22, color: '#34C759' }} />}
              onClick={() => { /* TODO: 代理中心 */ }}
              extra={<span style={{ color: '#c7c7c7' }}>›</span>}
            >
              代理中心
              <div style={{ color: '#999', fontSize: 12 }}>推广赚取佣金</div>
            </List.Item>
            <Divider style={{ margin: 0 }} />
            <List.Item
              prefix={<InformationCircleOutline style={{ fontSize: 22, color: '#7D4CDB' }} />}
              onClick={() => setAboutVisible(true)}
              extra={<span style={{ color: '#c7c7c7' }}>›</span>}
            >
              关于我们
              <div style={{ color: '#999', fontSize: 12 }}>了解更多信息</div>
            </List.Item>
          </List>
        </div>
      </div>

      <Modal
        visible={aboutVisible}
        title='关于我们'
        content={
          <div style={{ color: '#333', lineHeight: 1.7 }}>
            微信已读功能是一款帮助用户查看谁阅读了消息的工具。<br />
            通过本工具，您可以发布消息并分享给好友，当好友查看消息时，系统会自动记录已读状态。
          </div>
        }
        closeOnAction
        actions={[{ key: 'close', text: '关闭', onClick: () => setAboutVisible(false) }]}
        onClose={() => setAboutVisible(false)}
      />
    </div>
  )
}
